<template>
  <div>
    <h2>{{ msg }}</h2>
    <h2 v-once>
      v-once:{{ msg }}
    </h2>
    <h2 v-pre>
      v-pre:{{msg}}
    </h2>
    <input v-model="msg"> //双向绑定的input
    <ul style="list-style: none;">
      <li
        v-for="(v, i) in goods"
        :key="i"
      >
        {{ i+1 }}: {{ v }}
        <span
          @click="shanchu(i)"
          style="border-bottom: 1px solid black;"
        >delete</span>
      </li>
    </ul>
    <template v-for="item in gift">
      <!-- <template v-for="(item, i) in gift"> -->
      <!-- gift[i]与item相同 也可以操作gift[i]; -->
      {{ item.name }} : {{ item.price }}
    </template>
    <div v-if="goods.length">
      We have {{ goods.length }} kind of fruit
    </div>
    <div v-else>
      We have nothing
    </div>
    <v-btn @click="goods.pop()">
      delete last fruit
    </v-btn>
    <v-btn @click="del">
      delete
    </v-btn>
  </div>
</template>

<script>
export default {
  data: () => ({
    msg: 'hello world',
    seen: true,
    goods: ['apple', 'banana', 'pear', 'orange'],
    gift: [
      {
        name: 'p30',
        price: '3980',
      },
      {
        name: 'mate',
        price: '3000',
      },
    ],
  }),
  methods: {
    del() {
      this.goods.pop();
    },
    shanchu(index) {
      this.goods.splice(index, 1);
    },
  },
};
</script>
